import React from "react";
import ReactDOM from "react-dom";
import { BackHeader, SearchBox, Commodity } from "../components/ComponentImp";
import { Carousel, PullToRefresh, Tabs, Badge, ListView } from "antd-mobile";
import "../css/index.scss";
import { Log, ToastShow } from '../utils/CommonUtil';
import { get } from '../http/Fetch';
import URL from '../http/URL';

let pageSize = 4;

class Index extends React.Component {
    constructor(props) {
        super(props);
        //1.ListView
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,//prevRowData和nextRowData不相等时更新row
        });

        this.state = {
            //2.ListView
            dataSource,
            isLoading: false,//是否在加载中
            hasMore: true,//是否有更多数据
            listDatas: [],//列表数据
        }

    }
    componentDidMount() {
        let that = this;
        this.setState({ isLoading: true });
        let params = {
            keyword: "",
            pageNumber: 1,
            pageSize: pageSize
        }
        Log(params);
        get(URL.getHomeProduct, params, this, false, function (data) {
            let rows = data.rows;
            let rowsEnd = [];//最终的集合
            let rowItme = [];//左右两边一组
            for (let index = 0; index < rows.length; index++) {
                const row = rows[index];
                rowItme.push(row);
                if (index % 2 == 0) {
                    if (index == (rows.length - 1)) {
                        rowsEnd.push(rowItme);
                    }
                } else {
                    rowsEnd.push(rowItme);
                    rowItme = [];
                }
            }
            that.setState({//最开始打开页面和每上拉一次渲染的数据
                dataSource: that.state.dataSource.cloneWithRows(rowsEnd),
                isLoading: false,
                listDatas: rowsEnd,
                hasMore: rows.length == pageSize
            });
        });
    }

    onEndReached = () => {
        // load new data  上拉加载
        if (this.state.isLoading || !this.state.hasMore) {
            return;
        }
        this.setState({ isLoading: true });
        let that = this;
        let params = {
            keyword: "",
            pageNumber: (2 * (this.state.listDatas.length) / pageSize) + 1,
            pageSize: pageSize
        }
        Log(params);
        get(URL.getHomeProduct, params, this, false, function (data) {
            let rows = data.rows;
            let rowsEnd = that.state.listDatas;//最终的集合
            let rowItme = [];//左右两边一组
            for (let index = 0; index < rows.length; index++) {
                const row = rows[index];
                rowItme.push(row);
                if (index % 2 == 0) {
                    if (index == (rows.length - 1)) {
                        rowsEnd.push(rowItme);
                    }
                } else {
                    rowsEnd.push(rowItme);
                    rowItme = [];
                }
            }
            that.setState({
                dataSource: that.state.dataSource.cloneWithRows(rowsEnd),
                isLoading: false,
                listDatas: rowsEnd,
                hasMore: rows.length == pageSize
            });
        });

    }

    render() {

        const row = (rowData, sectionID, rowID) => {
            console.log(rowData, sectionID, rowID);
            return <div className="item-contain">
                {
                    rowData.map((item, index) => {
                        return <Commodity
                            history={this.props.history}
                            title={item.title}
                            isRight={index % 2 == 0 ? false : true}
                            originalPrice={item.originalPrice}
                            salesVolume={item.salesVolume}
                            couponPrice={item.couponPrice} />
                    })
                }
            </div>;
        };

        return <div>
            <Tabs tabs={this.tabs} 
                  initialPage={0} 
                  swipeable={false} 
                  tabBarActiveTextColor="#fe6060" 
                  tabBarUnderlineStyle={{ borderColor: "#fe6060", backgroundColor:"#fe6060", height: 3,width:14,marginLeft:40 }} 
                  onChange={(tab, index) => {}} 
                  onTabClick={(tab, index) => {}}>
            
                <div>
                  <ListView 
                  ref={el => (this.lv = el)} 
                  dataSource={this.state.dataSource} 
                  renderFooter={() => {
                    return <div style={{ padding: 30, textAlign: "center" }}>
                        {
                            this.state.isLoading ? "加载中..." : 
                          (this.state.hasMore?"上拉加载更多":"加载完了")
                        }
                    </div>}
                  }
                  renderRow={row} 
                  className="am-list"
                  useBodyScroll
                  pageSize={10} 
                  onScroll={() => {
                      if(scrollY > 300){
                          this.setState({isShowHead:'none'});
                      }else{
                        this.setState({isShowHead:''});
                      }
                    }} 
                  scrollRenderAheadDistance={500} 
                  onEndReached={()=>this.onEndReached()} 
                  onEndReachedThreshold={10}
                  initialListSize={10}
                  scrollEventThrottle={20}
                  />
                </div>
            </Tabs>
        </div>
    }

    

}